<template>
  <TreeSelect
    v-model:value="selected"
    style="width: 100%"
    :tree-data="treeData"
    tree-checkable
    allow-clear
    placeholder="请选择"
    tree-node-filter-prop="label"
    :replaceFields="fieldNames"
    :maxTagCount="1"
    @change="onSelected"
  >
    <template #title="{ label, type }">
      <Tooltip>
        <template #title>
          <span style="color: #bababa" v-if="type == '1'">{{ label }}</span>
          <span v-else>{{ label }}</span>
        </template>
        <div class="label">{{ label }}</div>
      </Tooltip>
    </template>
  </TreeSelect>
</template>

<script setup lang="ts">
import { Ref, nextTick, onMounted, ref, watch } from 'vue';
import { Tooltip, TreeSelect } from 'ant-design-vue';

const treeData: any = ref([]);
const fieldNames = {
  children: 'children',
  label: 'label',
  key: 'id',
  value: 'id',
};

const props = defineProps({
  formState: {
    type: Object,
    requried: true,
  },
  data: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['change']);
const selected = ref([]);

watch(
  () => props.formState,
  (val: any) => {
    if (!val.projectId) selected.value = [];
  },
  { deep: true },
);

treeData.value = props.data;
console.log(props.data, 'data');

const onSelected = (values: any) => {
  emit('change', values.join(','));
};
</script>

<style scoped>
.label {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:deep(.ant-select-selection-overflow-item) {
  max-width: 49% !important;
  margin-right: 4px !important;
}
</style>
